<template>
  <div class="m-tabs-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="战略发展信息" name="strategic">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="m-title">
              <span class="icon"></span>
              客户战略发展信息列表
            </div>
          </el-col>
          <el-col :span="12" class="text-r">
            <text-dialog
              text="新建"
              type="1"
              title="新建客户战略发展信息"
              ref="addDevelopStrategyRef"
              buttonType="primary"
              size="60%"
              btnShow="2"
              :isShow.sync="addDevelopStrategyIsShow"
              @showDialog="addDevelopStrategyShowDialog"
              @closeDialog="addDevelopStrategyCancelHandel"
              @closeDialogSubmit="addDevelopStrategySubmitHandel"
              @cancelHandel="addDevelopStrategyCancelHandel"
            >
              <el-form
                ref="addDevelopStrategyFormDataRef"
                :model="addDevelopStrategyFormData"
                :label-position="labelPosition"
                label-width="200px"
              >
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="主营业务及业务种类" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addDevelopStrategyFormData.mainBusiness"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务发展规划" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            addDevelopStrategyFormData.businessDevelopPlan
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务需求" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addDevelopStrategyFormData.businessRequire"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="关键购买因素" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            addDevelopStrategyFormData.KeyPurchasingFactors
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="购买决策流程" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            addDevelopStrategyFormData.purchaseDecisionProcess
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="国家行业政策" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            addDevelopStrategyFormData.nationalIndustryPolicy
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务区域" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addDevelopStrategyFormData.businessArea"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="primary">批量删除</el-button>
            <el-button type="primary">返回</el-button>
          </el-col>
        </el-row>
        <DicTable
          ref="availableDicTable"
          stripe
          class="m-table"
          :columnData="developStrategyTableColumns"
          :tableData="developStrategyTableData"
          :loading="developStrategyTableLoading"
          :currentPage="developStrategyTablePage.pageIndex"
          :pageSize="developStrategyTablePage.pageSize"
          :pager="true"
          @on-page-change="developStrategyHandlePageChange"
        >
          <template #opt="{ row }">
            <text-dialog
              text="修改"
              type="1"
              title="修改客户战略发展信息"
              ref="editDevelopStrategyRef"
              class="u-add-btn"
              size="60%"
              btnShow="2"
              :isShow="editDevelopStrategyIsShow"
              @showDialog="editDevelopStrategyShowDialog"
              @closeDialogSubmit="editDevelopStrategySubmitHandel"
              @cancelHandel="editDevelopStrategyCancelHandel"
            >
              <el-form
                ref="editFormDataRef"
                :model="developStrategyFormData"
                :label-position="labelPosition"
                label-width="200px"
              >
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="主营业务及业务种类" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="developStrategyFormData.mainBusiness"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务发展规划" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="developStrategyFormData.businessDevelopPlan"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务需求" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="developStrategyFormData.businessRequire"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="关键购买因素" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="developStrategyFormData.KeyPurchasingFactors"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="购买决策流程" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            developStrategyFormData.purchaseDecisionProcess
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="国家行业政策" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="
                            developStrategyFormData.nationalIndustryPolicy
                          "
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务区域" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="developStrategyFormData.businessArea"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="text" @click="toDelRow(row)" class="u-btn"
              >删除</el-button
            >
          </template>
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="财务信息" name="financial">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="m-title">
              <span class="icon"></span>
              客户财务信息列表
            </div>
          </el-col>
          <el-col :span="12" class="text-r">
            <text-dialog
              text="新建"
              type="1"
              title="添加客户财务信息"
              ref="financialRefAdd"
              buttonType="primary"
              size="90%"
              btnShow="2"
              :isShow="addFinancialIsShow"
              @showDialog="addFinancialShowDialog"
              @closeDialog="addFinancialCancelHandel"
              @closeDialogSubmit="addFinancialAddSubmitHandel"
              @cancelHandel="addFinancialCancelHandel"
            >
              <el-form
                ref="addFinancialFormDataRef"
                :model="addFinancialFormData"
                :label-position="labelPosition"
                label-width="100px"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年份" class="u-ipt">
                        <el-date-picker
                          v-model="addFinancialFormData.year"
                          type="date"
                          placeholder="选择日期"
                          class="u-date"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年收入">
                        <el-input
                          v-model="addFinancialFormData.yearIncome"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">万元</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年预算" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.businessRequire"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="利润总额" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.profitTotal"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="电信指出预算" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addFinancialFormData.spendBudget"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年信息化消费" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.nationalIndustryPolicy"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="电信份额" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.share"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="利润增长率" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.profitGrowthRate"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">%</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="报销政策" class="u-ipt">
                        <el-input
                          v-model="addFinancialFormData.reimbursementPolicy"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="primary">批量删除</el-button>
            <el-button type="primary">返回</el-button>
          </el-col>
        </el-row>

        <DicTable
          ref="financialDicTable"
          stripe
          class="m-table"
          :columnData="financialTableColumns"
          :tableData="financialTableData"
          :loading="financialTableLoading"
          :currentPage="financialTablePage.pageIndex"
          :pageSize="financialTablePage.pageSize"
          :pager="true"
          @on-page-change="financialHandlePageChange"
        >
          <template #opt="{ row }">
            <text-dialog
              text="修改"
              type="1"
              ref="editFinancialRef"
              title="修改客户财务信息"
              size="90%"
              btnShow="2"
              :isShow="editFinancialIsShow"
              @showDialog="editFinancialShowDialog"
              @closeDialogSubmit="editFinancialSubmitHandel"
              @cancelHandel="editFinancialCancelHandel"
            >
              <el-form
                ref="editFinancialFormDataRef"
                :model="editFinancialFormData"
                :label-position="labelPosition"
                label-width="100px"
                :rules="rules"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年份" class="u-ipt">
                        <el-date-picker
                          v-model="editFinancialFormData.year"
                          type="date"
                          placeholder="选择日期"
                          class="u-date"
                        ></el-date-picker>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年收入">
                        <el-input
                          v-model="editFinancialFormData.yearIncome"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">万元</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年预算" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.businessRequire"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="利润总额" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.profitTotal"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="电信指出预算" class="u-ipt">
                        <el-input
                          autosize
                          type="textarea"
                          v-model="editFinancialFormData.spendBudget"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="年信息化消费" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.nationalIndustryPolicy"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="电信份额" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.share"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="利润增长率" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.profitGrowthRate"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">%</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="报销政策" class="u-ipt">
                        <el-input
                          v-model="editFinancialFormData.reimbursementPolicy"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="text" @click="toDelRow(row)" class="u-btn"
              >删除</el-button
            >
          </template>
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="竞争对手信息" name="competitors">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="m-title">
              <span class="icon"></span>
              竞争对手信息列表
            </div>
          </el-col>
          <el-col :span="12" class="text-r">
            <text-dialog
              text="新建"
              type="1"
              title="添加竞争对手信息"
              ref="addCompetitors"
              buttonType="primary"
              size="90%"
              btnShow="2"
              :isShow="addCompetitorsIsShow"
              @showDialog="addCompetitorsShowDialog"
              @closeDialog="addCompetitorsCancelHandel"
              @closeDialogSubmit="addCompetitorsHandel"
              @cancelHandel="addCompetitorsCancelHandel"
            >
              <el-form
                ref="addCompetitorsFormDataRef"
                :model="addCompetitorsFormData"
                :label-position="labelPosition"
                label-width="100px"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争对手名称"
                        class="u-ipt"
                        required
                        prop="competitorsName"
                      >
                        <el-input
                          v-model="addCompetitorsFormData.competitorsName"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务收入" prop="businessIncome">
                        <el-input
                          v-model="addCompetitorsFormData.businessIncome"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">万元</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争业务类型"
                        class="u-ipt"
                        prop="competitiveTypesValue"
                      >
                        <el-select
                          v-model="addCompetitorsFormData.competitiveTypesValue"
                          @change="addCompetitorsChange"
                          class="m-select"
                        >
                          <el-option
                            v-for="item in competitiveTypesArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争对手市场份额"
                        class="u-ipt"
                        prop="competitorMarketShare"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="addCompetitorsFormData.competitorMarketShare"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">%</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争信息描述"
                        class="u-ipt"
                        prop="spendBudget"
                      >
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addFinancialFormData.spendBudget"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="备注" class="u-ipt" prop="note">
                        <el-input
                          type="textarea"
                          autosize
                          v-model="addCompetitorsFormData.note"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="primary">批量删除</el-button>
            <el-button type="primary">返回</el-button>
          </el-col>
        </el-row>
        <DicTable
          ref="financialDicTable"
          stripe
          class="m-table"
          :columnData="competitorsTableColumns"
          :tableData="competitorsTableData"
          :loading="competitorsTableLoading"
          :currentPage="financialTablePage.pageIndex"
          :pageSize="competitorsTablePage.pageSize"
          :pager="true"
          @on-page-change="competitorsHandlePageChange"
        >
          <template #opt="{ row }">
            <text-dialog
              text="修改"
              type="1"
              title="修改竞争对手信息"
              ref="editCompetitors"
              size="90%"
              btnShow="2"
              :isShow="editCompetitorsIsShow"
              @showDialog="editCompetitorsShowDialog"
              @closeDialogSubmit="editCompetitorsSubmitHandel"
              @cancelHandel="editCompetitorsCancelHandel"
            >
              <el-form
                ref="addCompetitorsFormDataRef"
                :model="editCompetitorsFormData"
                :label-position="labelPosition"
                label-width="100px"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争对手名称"
                        class="u-ipt"
                        required
                        prop="competitorsName"
                      >
                        <el-input
                          v-model="editCompetitorsFormData.competitorsName"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="业务收入" prop="businessIncome">
                        <el-input
                          v-model="editCompetitorsFormData.businessIncome"
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">万元</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争业务类型"
                        class="u-ipt"
                        prop="competitiveTypesValue"
                      >
                        <el-select
                          v-model="
                            editCompetitorsFormData.competitiveTypesValue
                          "
                          @change="editCompetitorsChange"
                          class="m-select"
                        >
                          <el-option
                            v-for="item in competitiveTypesArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争对手市场份额"
                        class="u-ipt"
                        prop="competitorMarketShare"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="
                            editCompetitorsFormData.competitorMarketShare
                          "
                          class="input-with-select"
                        >
                          <i slot="suffix" style="margin-right: 10px;">%</i>
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="竞争信息描述"
                        class="u-ipt"
                        prop="spendBudget"
                      >
                        <el-input
                          autosize
                          type="textarea"
                          v-model="editCompetitorsFormData.spendBudget"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="备注" class="u-ipt" prop="note">
                        <el-input
                          type="textarea"
                          autosize
                          v-model="editCompetitorsFormData.note"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="text" @click="toDelRow(row)" class="u-btn"
              >删除
            </el-button>
          </template>
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="客户信息化信息" name="customerInfo">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="m-title">
              <span class="icon"></span>
              客户信息化信息
            </div>
          </el-col>
          <el-col :span="12" class="text-r">
            <text-dialog
              text="新建"
              type="1"
              title="添加客户信息化信息"
              ref="addCustomerInfo"
              buttonType="primary"
              size="90%"
              btnShow="2"
              :isShow="addCustomerInfoIsShow"
              @showDialog="addCustomerInfoShowDialog"
              @closeDialog="addCustomerInfoCancelHandel"
              @closeDialogSubmit="addCustomerInfoHandel"
              @cancelHandel="addCustomerInfoCancelHandel"
            >
              <el-form
                ref="addCustomerInfoFormDataRef"
                :model="addCustomerInfoFormData"
                :label-position="labelPosition"
                label-width="100px"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="系统名称"
                        class="u-ipt"
                        required
                        prop="competitorsName"
                      >
                        <el-input
                          v-model="addCompetitorsFormData.competitorsName"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="信息系统类型" prop="systemTypeValue">
                        <el-select
                          v-model="addCustomerInfoFormData.systemTypeValue"
                          @change="addCompetitorsChange"
                          class="m-select"
                        >
                          <el-option
                            v-for="item in systemNameTypeArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="建设时间"
                        class="u-ipt"
                        prop="constructionTime"
                      >
                        <el-date-picker
                          v-model="addCustomerInfoFormData.constructionTime"
                          type="date"
                          class="u-date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="开发厂家"
                        class="u-ipt"
                        prop="developManufacturer"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="addCompetitorsFormData.developManufacturer"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="使用人数"
                        class="u-ipt"
                        prop="useNumber"
                      >
                        <el-input
                          autosize
                          type="textarea"
                          v-model="addFinancialFormData.useNumber"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="移动化程度"
                        class="u-ipt"
                        prop="mobilityDegree"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="addCustomerInfoFormData.mobilityDegree"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="primary">批量删除</el-button>
            <el-button type="primary">返回</el-button>
          </el-col>
        </el-row>
        <DicTable
          ref="financialDicTable"
          stripe
          class="m-table"
          :columnData="customerInfoTableColumns"
          :tableData="customerInfoTableData"
          :loading="customerInfoTableLoading"
          :currentPage="customerInfoTablePage.pageIndex"
          :pageSize="customerInfoTablePage.pageSize"
          :pager="true"
          @on-page-change="customerInfoHandlePageChange"
        >
          <template #opt="{ row }">
            <text-dialog
              text="修改"
              type="1"
              title="修改竞争对手信息"
              ref="editCustomerInfoRef"
              size="90%"
              btnShow="2"
              :isShow="editCustomerInfoIsShow"
              @showDialog="editCustomerInfoShowDialog"
              @closeDialog="editCustomerInfoCancelHandel"
              @closeDialogSubmit="editCustomerInfoSubmitHandel"
              @cancelHandel="editCustomerInfoCancelHandel"
            >
              <el-form
                ref="editCustomerInfoRef"
                :model="editCustomerInfoFormData"
                :label-position="labelPosition"
                label-width="100px"
              >
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="系统名称"
                        class="u-ipt"
                        required
                        prop="competitorsName"
                      >
                        <el-input
                          v-model="editCustomerInfoFormData.competitorsName"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="信息系统类型" prop="systemTypeValue">
                        <el-select
                          v-model="editCustomerInfoFormData.systemTypeValue"
                          @change="editCustomerInfoChange"
                          class="m-select"
                        >
                          <el-option
                            v-for="item in systemNameTypeArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="建设时间"
                        class="u-ipt"
                        prop="constructionTime"
                      >
                        <el-date-picker
                          v-model="editCustomerInfoFormData.constructionTime"
                          type="date"
                          class="u-date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="开发厂家"
                        class="u-ipt"
                        prop="developManufacturer"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="editCustomerInfoFormData.developManufacturer"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="使用人数"
                        class="u-ipt"
                        prop="useNumber"
                      >
                        <el-input
                          autosize
                          type="textarea"
                          v-model="editCustomerInfoFormData.useNumber"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="移动化程度"
                        class="u-ipt"
                        prop="mobilityDegree"
                      >
                        <el-input
                          type="textarea"
                          autosize
                          v-model="editCustomerInfoFormData.mobilityDegree"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </text-dialog>
            <el-button type="text" @click="toDelRow(row)" class="u-btn"
              >删除
            </el-button>
          </template>
        </DicTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import TextDialog from "@/components/public/DicDialog/TextDialog";
export default {
  name: "CustExtensionInfo",
  data() {
    return {
      addDevelopStrategyIsShow: false,
      editDevelopStrategyIsShow: false,
      addFinancialIsShow: false,
      editFinancialIsShow: false,
      addCompetitorsIsShow: false,
      editCompetitorsIsShow: false,
      addCustomerInfoIsShow: false,
      editCustomerInfoIsShow: false,
      //发展战略信息form
      developStrategyFormData: {
        // 主营业务及业务种类
        mainBusiness: "",
        // 业务发展规划
        businessDevelopPlan: "",
        //业务需求
        businessRequire: "",
        // 关键购买因素
        KeyPurchasingFactors: "",
        // 购买决策流程
        purchaseDecisionProcess: "",
        // 国家行业政策
        nationalIndustryPolicy: "",
        // 业务区域
        businessArea: "",
      },
      labelPosition: "left",
      activeName: "strategic",
      developStrategyTableColumns: [
        { type: "checkbox", width: 50, fixed: null },
        { field: "oldPartyCode", title: "联系人姓名 ", width: 200 },
        { field: "custName", title: "联系人类型 ", width: 150 },
        { slotName: "partyNumber", title: "手机号码", width: 180 },
        { field: "industryCdName", title: "办公电话 ", width: 180 },
        {
          field: "Email",
          title: "Email",

          showOverflow: true,
        },
        {
          field: "identityType",
          title: "通信地址",

          showOverflow: true,
        },
        {
          field: "custManager",
          title: "通信地址 ",

          showOverflow: true,
        },
        {
          field: "createDate",
          title: "联系邮编",

          showOverflow: true,
        },
        {
          field: "fax",
          title: "传真",

          showOverflow: true,
        },
        {
          field: "statusCd",
          title: "是否首选联系人",
          showOverflow: true,
        },
        { slotName: "opt", title: "操作", width: 300, fixed: "right" },
      ],
      developStrategyTableData: [
        {
          custId: 10001,
          oldPartyCode: "2021-03-10",
          custName: "T1",
          partyNumber: "黑龙江",
          industryCdName: "李四",
          commonRegionId: "13189897980", //申请人姓名
          identityType: "张三", //客户姓名
          custManager: "", //社会统一信用代码
          createDate: "营业执照", //证件类型
          statusCd: " 4326465**6",
        },
      ],
      developStrategyTableLoading: false,
      developStrategyTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      // 新建-发展战略信息
      addDevelopStrategyFormData: {
        // 主营业务及业务种类
        mainBusiness: "",
        // 业务发展规划
        businessDevelopPlan: "",
        //业务需求
        businessRequire: "",
        // 关键购买因素
        KeyPurchasingFactors: "",
        // 购买决策流程
        purchaseDecisionProcess: "",
        // 国家行业政策
        nationalIndustryPolicy: "",
        // 业务区域
        businessArea: "",
      },
      // 财务信息-新建
      addFinancialFormData: {
        // 年份
        year: "",
        // 年收入
        yearIncome: "",
        // 年预算
        annualBudget: "",
        //利润总额
        profitTotal: "",
        //电信指出预算
        spendBudget: "",
        // 年信息化消费
        yearInfoConsumption: "",
        // 电信份额
        share: "",
        // 利润增长率
        profitGrowthRate: "",
        // 报销政策
        reimbursementPolicy: "",
      },
      financialTableColumns: [
        { type: "checkbox", width: 50, fixed: null },
        { field: "oldPartyCode", title: "联系人姓名 ", width: 200 },
        { field: "custName", title: "联系人类型 ", width: 150 },
        { slotName: "partyNumber", title: "手机号码", width: 180 },
        { field: "industryCdName", title: "办公电话 ", width: 180 },
        {
          field: "Email",
          title: "Email",

          showOverflow: true,
        },
        {
          field: "identityType",
          title: "通信地址",

          showOverflow: true,
        },
        {
          field: "custManager",
          title: "通信地址 ",

          showOverflow: true,
        },
        {
          field: "createDate",
          title: "联系邮编",

          showOverflow: true,
        },
        {
          field: "fax",
          title: "传真",

          showOverflow: true,
        },
        {
          field: "statusCd",
          title: "是否首选联系人",
          showOverflow: true,
        },
        { slotName: "opt", title: "操作", width: 300, fixed: "right" },
      ],
      financialTableData: [
        {
          custId: 10001,
          oldPartyCode: "2021-03-10",
          custName: "T1",
          partyNumber: "黑龙江",
          industryCdName: "李四",
          commonRegionId: "13189897980", //申请人姓名
          identityType: "张三", //客户姓名
          custManager: "", //社会统一信用代码
          createDate: "营业执照", //证件类型
          statusCd: " 4326465**6",
        },
      ],
      financialTableLoading: false,
      financialTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],

        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      //财务信息-修改
      editFinancialFormData: {
        // 年份
        year: "",
        // 年收入
        yearIncome: "",
        // 年预算
        annualBudget: "",
        //利润总额
        profitTotal: "",
        //电信指出预算
        spendBudget: "",
        // 年信息化消费
        yearInfoConsumption: "",
        // 电信份额
        share: "",
        // 利润增长率
        profitGrowthRate: "",
        // 报销政策
        reimbursementPolicy: "",
      },
      // 竞争对手信息-新建-竞争业务类型
      competitiveTypesArr: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "1",
          label: "云",
        },
        {
          value: "2",
          label: "物联网",
        },
        {
          value: "3",
          label: "ICT",
        },
        {
          value: "4",
          label: "专线",
        },
        {
          value: "5",
          label: "行业应用",
        },
        {
          value: "6",
          label: "宽带",
        },
        {
          value: "7",
          label: "移动",
        },
        {
          value: "8",
          label: "固话",
        },
        {
          value: "9",
          label: "其他",
        },
      ],
      //  竞争对手信息-新建=-from表单
      addCompetitorsFormData: {
        // 竞争对手名称
        competitorsName: "",
        // 业务收入
        businessIncome: "",
        // 竞争业务类型
        competitiveTypesValue: "",
        // 竞争对手市场份额
        competitorMarketShare: "",
        //备注
        note: "",
      },
      //竞争对手信息-表格
      competitorsTableColumns: [
        { type: "checkbox", width: 50, fixed: null },
        { field: "oldPartyCode", title: "联系人姓名 ", width: 200 },
        { field: "custName", title: "联系人类型 ", width: 150 },
        { slotName: "partyNumber", title: "手机号码", width: 180 },
        { field: "industryCdName", title: "办公电话 ", width: 180 },
        {
          field: "Email",
          title: "Email",

          showOverflow: true,
        },
        {
          field: "identityType",
          title: "通信地址",

          showOverflow: true,
        },
        {
          field: "custManager",
          title: "通信地址 ",

          showOverflow: true,
        },
        {
          field: "createDate",
          title: "联系邮编",

          showOverflow: true,
        },
        {
          field: "fax",
          title: "传真",

          showOverflow: true,
        },
        {
          field: "statusCd",
          title: "是否首选联系人",
          showOverflow: true,
        },
        { slotName: "opt", title: "操作", width: 300, fixed: "right" },
      ],
      competitorsTableData: [
        {
          custId: 10001,
          oldPartyCode: "2021-03-10",
          custName: "T1",
          partyNumber: "黑龙江",
          industryCdName: "李四",
          commonRegionId: "13189897980", //申请人姓名
          identityType: "张三", //客户姓名
          custManager: "", //社会统一信用代码
          createDate: "营业执照", //证件类型
          statusCd: " 4326465**6",
        },
      ],
      competitorsTableLoading: false,
      competitorsTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      // 竞争对手信息-修改
      editCompetitorsFormData: {
        // 竞争对手名称
        competitorsName: "",
        // 业务收入
        businessIncome: "",
        // 竞争业务类型
        competitiveTypesValue: "",
        // 竞争对手市场份额
        competitorMarketShare: "",
        //备注
        note: "",
      },
      // 客户信息化信息
      systemNameTypeArr: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "1",
          label: "oA",
        },
        {
          value: "2",
          label: "CRM",
        },
        {
          value: "3",
          label: "ERP",
        },
        {
          value: "4",
          label: "财务管理",
        },
        {
          value: "5",
          label: "其他",
        },
      ],
      //客户信息化信息-新建
      addCustomerInfoFormData: {
        // 系统名称
        systemName: "",
        //系统类型选中
        systemTypeValue: "",
        // 建设时间
        constructionTime: "",
        //开发厂家
        developManufacturer: "",
        // 使用人数
        useNumber: "",
        // 移动化程度
        mobilityDegree: "",
      },
      customerInfoTableColumns: [
        { type: "checkbox", width: 50, fixed: null },
        { field: "systemName", title: "系统名称 ", width: 200 },
        { field: "constructionTime", title: "系统类型 ", width: 150 },
        { slotName: "developManufacturer", title: "开发厂家", width: 180 },
        { field: "useNumber", title: "使用人数 ", width: 180 },
        {
          field: "mobilityDegree",
          title: "移动化程度",

          showOverflow: true,
        },

        { slotName: "opt", title: "操作", width: 300, fixed: "right" },
      ],
      customerInfoTableData: [
        {
          custId: 10001,
          systemName: "2021-03-10",
          constructionTime: "T1",
          partyNumber: "黑龙江",
          developManufacturer: "李四",
          useNumber: "13189897980", //申请人姓名
          mobilityDegree: "张三", //客户姓名
        },
      ],
      customerInfoTableLoading: false,
      customerInfoTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },
      //客户信息化信息-修改
      editCustomerInfoFormData: {
        // 系统名称
        systemName: "",
        //系统类型选中
        systemTypeValue: "",
        // 建设时间
        constructionTime: "",
        //开发厂家
        developManufacturer: "",
        // 使用人数
        useNumber: "",
        // 移动化程度
        mobilityDegree: "",
      },
    };
  },

  components: {
    DicTable,
    TextDialog,
  },
  created() {},
  mounted() {},

  methods: {
    handleClick(tab, event) {
      
    },
    developStrategyHandlePageChange(val) {
      
    },
    // 发展战略信息-修改-弹窗显示
    editDevelopStrategyShowDialog() {
      this.editDevelopStrategyIsShow = true;
    },
    // 发展战略信息-修改-提交方法
    editDevelopStrategySubmitHandel() {
      this.editDevelopStrategyIsShow = false;
    },
    // 发展战略信息-修改-取消方法
    editDevelopStrategyCancelHandel() {
      this.editDevelopStrategyIsShow = false;
    },
    //新建客户战略发展信息-弹窗显示
    addDevelopStrategyShowDialog() {
      this.addDevelopStrategyIsShow = true;
    },
    // 新建客户战略发展信息-弹窗关闭

    // 发展战略信息-新建-取消方法
    addDevelopStrategySubmitHandel() {
      this.addDevelopStrategyIsShow = false;
    },
    // 发展战略信息-新建-取消方法
    addDevelopStrategyCancelHandel() {
      this.addDevelopStrategyIsShow = false;
    },
    //  添加客户财务信息-弹窗显示
    addFinancialShowDialog() {
      this.addFinancialIsShow = true;
    },
    // 财务信息-表格分页方法
    financialHandlePageChange() {},
    //修改客户财务信息
    editFinancialShowDialog() {
      this.editFinancialIsShow = true;
    },
    // 财务信息-修改-确定
    editFinancialSubmitHandel() {
      this.$refs["editFinancialFormDataRef"].validate((valid) => {
        if (valid) {
          alert("submit!", this.isShow);

          this.editFinancialIsShow = false;
          
        } else {
          

          return false;
        }
      });
    },
    // 财务信息-修改-取消
    editFinancialCancelHandel() {
      
    },

    // 财务信息-添加-确定
    addFinancialAddSubmitHandel() {
      this.addFinancialIsShow = false;
    },
    // 财务信息-添加-取消
    addFinancialCancelHandel() {
      this.addFinancialIsShow = false;
    },
    //新建客户竞争对手信息-select
    addCompetitorsChange(val) {
      
    },
    // 新建客户竞争对手信息弹窗显示
    addCompetitorsShowDialog() {
      this.addCompetitorsIsShow = true;
    },
    // 新建竞争对手信息-确定
    addCompetitorsHandel() {
      this.addCompetitorsIsShow = false;
    },
    // 新建竞争对手信息-取消
    addCompetitorsCancelHandel() {
      this.addCompetitorsIsShow = false;
    },
    // 竞争对手信息-分页
    competitorsHandlePageChange() {
      
    },
    // 竞争对手信息-竞争业务类型
    editCompetitorsChange(val) {
      
    },
    // 修改竞争对手信息-弹窗显示
    editCompetitorsShowDialog() {
      this.editCompetitorsIsShow = true;
    },
    // 竞争对手信息-修改-确定
    editCompetitorsSubmitHandel() {
      this.editCompetitorsIsShow = false;
    },
    // 竞争对手信息-修改-取消
    editCompetitorsCancelHandel() {
      this.editCompetitorsIsShow = false;
    },
    // 客户信息化信息-弹窗显示
    addCustomerInfoShowDialog() {
      this.addCustomerInfoIsShow = true;
    },
    //添加客户信息化信息-新建-确定
    addCustomerInfoHandel() {
      this.addCustomerInfoIsShow = false;
    },
    // 添加客户信息化信息-修改-取消
    addCustomerInfoCancelHandel() {
      this.addCustomerInfoIsShow = false;
    },
    // 客户信息化信息-分页
    customerInfoHandlePageChange(val) {
      
    },
    // 竞争对手信息-信息系统类型
    editCustomerInfoChange(val) {
      
    },
    // 客户信息化信息-修改-弹窗显示
    editCustomerInfoShowDialog() {
      this.editCustomerInfoIsShow = true;
    },
    //添加客户信息化信息-修改-确定
    editCustomerInfoSubmitHandel() {
      this.editCustomerInfoIsShow = false;
    },
    //添加客户信息化信息-修改-取消
    editCustomerInfoCancelHandel() {
      this.editCustomerInfoIsShow = false;
    },
    //
  },
};
</script>
<style lang="scss" scoped>
.m-select {
  width: 100%;
}
.m-tabs-box {
  padding: 0.2rem 0.3rem;
}
.m-title {
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.text-r {
  text-align: right;
}
.warp {
  margin: 0;
  margin-right: 0.1rem;
}
.u-date {
  width: 100%;
}
</style>
